﻿@import "../../LiberUI/Style/Default/Theme";
@import "../../LiberUI/Style/Default/_soIcons";

@font-face {
  font-family: 'SoIcons';
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot');
  src: url('/LiberUI/Style/Default/fonts/iconfont.eot') format('embedded-opentype'), url('/LiberUI/Style/Default/fonts/iconfont.woff') format('woff'), url('/LiberUI/Style/Default/fonts/iconfont.ttf') format('truetype'), url('/LiberUI/Style/Default/fonts/iconfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

$headHeight:80px;
#headBar {
    position: fixed;
    margin: 0 auto;
    height: $headHeight;
    background-color: none;
    color:white;
    z-index: 99;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -webkit-transition: all ease 0.3s;
    transition: all ease 0.3s;
    &.focus{
        background-color:rgba(0, 0, 0,0.5);
    }
}

#siteLogo{
    height:$headHeight;
    background-image: url('../Imgs/logo-white.png');
    //background-image: url('../Imgs/logo-slogan.png');
    background-size:auto $headHeight;
    background-position:left center;
    background-repeat:no-repeat;
}

#siteLink{
    text-align:center;
    &>a{
        display:inline-block;
        height:$headHeight;
        line-height:$headHeight;
        border-bottom:none;
        color:white;
        margin-left:2em;
        &:hover{
            color:$ClrTheme;
        }
    }
}

#chapter1{
    height:100%;
    position:fixed;
    top:0;
    z-index:1;
    min-height:80%;
    background-image: url('../Imgs/loginBk2.jpg');
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
}
.chapter1Mask{
    height:100%;
    width:100%;
}
#mainRow{
    height:85%;
    padding-top:12em;
}

#siteTitle{
    color:white;
    padding-left:2em;
    text-shadow:2px 2px 2px black;
    &>span{
        font-size:2.8rem;
        font-weight:bolder;
    }
    &>h1{
        padding-left:2em;
    }
    &>h3{
        padding-left:2em;
    }
}
#rowLogin{
    
}
#loginForm{
    background-color:rgba(128, 128, 128,0.7);
    padding:20px;
}
#standForm{
    &>h3{
        color:white;
    }
    &>input{
        width:100%;
        margin:0 0 0.3em 0;
    }
    &>span{
        display:inline-block;
        width:100%;
        padding:0;
        color:$ClrErr;
        text-align:right;
    }
}
#lnkFindPass{
    margin:5px 0 5px 0;
    color:$ClrFocusTxt;
    float:right;
    &:hover{
        color:$ClrFocus;
    }
}
#lnkRegister{
    margin:5px 0 5px 1.5em;
    color:$ClrFocusTxt;
    float:right;
    &:hover{
        color:$ClrFocus;
    }
}

#txbKey{
    padding-left:2em;
    background-image: url('../Imgs/inputIcon.png');
    background-size:2em;
    background-position:0.2em 0.2em;
    background-repeat:no-repeat;
}

#txbPass{
    padding-left:2em;
    background-image: url('../Imgs/inputIcon.png');
    background-size:2em;
    background-repeat:no-repeat;
    background-position:0.2em -2.6em;
}
#btnLogin{
    position:relative;
    margin:5px 0 0 0;
}
#wxLoginForm{
    padding:20px;
    color:$ClrFocusTxt;
    &>i{
        @include soicon($ClrOk);
    }
}
#imgWxTmpQr{
    margin:1em;
    width:85%;
}

@-moz-keyframes downArrow{
    0%{
        background-position-y:center;
        opacity:0.3;
    }
    70%{
        background-position-y:bottom;
        opacity:1;
    }
    100%{
        background-position-y:center;
        opacity:0.5;
    }
}
@-webkit-keyframes downArrow{
    0%{
        background-position-y:center;
        opacity:0.3;
    }
    70%{
        background-position-y:bottom;
        opacity:1;
    }
    100%{
        background-position-y:center;
        opacity:0.5;
    }
}
@keyframes downArrow{
    0%{
        background-position-y:center;
        opacity:0.3;
    }
    70%{
        background-position-y:bottom;
        opacity:1;
    }
    100%{
        background-position-y:center;
        opacity:0.5;
    }
}
#ourProduct {
    & > h3 {
        width: 100%;
        text-align: center;
        color: white;
        text-shadow: 2px 2px 2px black;
    }
}
#nextArrow {
    background-repeat: no-repeat;
    height: 40px;
    width: 100%;
    margin: 0;
    background-size: auto 20px;
    background-image: url('') /*../Imgs/ourProductArrow.gif*/;
    background-position-x:center;
    -moz-animation-name: downArrow;
    -o-animation-name: downArrow;
    -webkit-animation-name: downArrow;
    animation-name: downArrow;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    -webkit-animation-play-state: running;
    animation-play-state: running;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

#chapter2{
    position:relative;
    z-index:1; 
    height:80%;
    width:100%;
    //background-image: url('../Imgs/234605-140321141T180.jpg');
    background-image: url('../Imgs/index_01.png');
    background-size:auto 60%;
    background-position:center center;
    background-color:white;
    background-repeat:no-repeat;
    &>.chpTitle{
        color:$ClrTheme;
    }
}
.chpTitle{
    display:inline-block;
    width:100%;
    text-align:center;
    margin-top:1em;
}
.chpTitle_bottom{
    height:2em;
    min-height:2em;
    background-image: url('../Imgs/ourProductArrow2.gif');
    background-repeat:no-repeat;
    background-size:auto 100%;
    background-position:center center;
}

#chapter3{
    position:relative;
    width:100%;
    z-index:1;
    background-image: url('../Imgs/index_02.png');
    background-size:cover;
    background-color:$ClrTheme;
    &>.chpTitle{
        color:$ClrThemeHotTxt;
    }
}

#aggregation{
    margin-top:2em;
    color:white;
    &>div{
        margin-top:2em;
        text-align:center;
        height:20em;
        &>i{
            @include soicon(white);
            font-size:600% !important;
        }
    }
}
.argIcon{
    font-size:700% !important;
}


#chapter4{
    position:relative;
    width:100%;
    height:60%;
    z-index:1;
    background-color:white;
    color:$ClrTheme;
    &>.row{
        height:8em;
        text-align:center;
        background-image: url('') /*../Imgs/b_gezi.png*/;
        background-repeat:repeat-x;
        background-position:left center;
    }
}
.infolize{
    line-height:1.4em;
    padding:1em;
    border-right:1px solid gray;
    &.end{
        border:none;
    }
}

#nxtWebOffice{
    color:$ClrImportant;
}
#chapter5{
    position:relative;
    width:100%;
    height:55%;
    z-index:1;
    background-color:$ClrThemeBk;
    color:$ClrThemeHotTxt;
}
#invite{
    height:100%;
    padding:2em 1em;
    background-color:#f75e5e;
    color:white;
}
.customVoice{
    margin:3em auto;
    text-align:center;
    &>img{
        height:8em;
        width:8em;
        border-radius:4em;
    }
    &>span{
        display:inline-block;
        width:100%;
        height:2em;
        line-height:2em;
        text-align:center;
    }
    &>div{
        display:inline-block;
        width:10em;
        min-height:1px;
        height:1px;
        border:1px solid $ClrTheme;
    }
    &>p{
        padding:1em 15%;
    }
}

#chapter6{
    position:relative;
    width:100%;
    height:60%;
    min-height:60%;
    z-index:1;
    background-color:white;
    color:$ClrTheme;
}


#pageFoot{
    position:absolute;
    height:200px;
    padding-top:2em;
    color:$ClrThemeTxt;
    background-color:$ClrThemeBk;
    &>div{
        line-height:3em;
    }
}
#connactUs{
    line-height:2em;
}
#mailUs{
    &>a{
        line-height:3em;
        &>i{
            @include soicon($ClrThemeTxt);
        }
        &:hover{
            &>i{
                @include soicon($ClrTheme);
            }
        }
    }
}


/*#region 页面帮助*/
#pageHelper {
    position: fixed;
    bottom: 60px;
    right: 20px;
    background-color: #bababa;
    -moz-transition: all ease 0.5s;
    -o-transition: all ease 0.5s;
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    z-index:999999;
    & > ul {
        width: 4em;
        margin: 0;
        padding: 0;
        list-style: none;
        cursor: pointer;
        & > li {
            height: 4em;
            padding: 0;
            &:hover {
                background-color: rgba(0,0,0,0.75);
            }
        }
    }
}
#goTop {
    display: none;
    background-image: url('/SiteUI/Imgs/goTop.gif');
    background-size: auto 8em;
    &:hover {
        background-position: 0 -4em;
    }
}
/*#endregion*/

